<template>
  <div class="home-index">
    <div style="width: calc(100vw); height: calc(100vh); background: linear-gradient(#131427, #2A2C50); overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;">
      <vue-header @accountSecurityClick="accountSecurityClick" @loginOutClick="loginOutClick" :userName="userName" :userImages="userImages"></vue-header>
      <div :style="{ width: '100%', height: '86%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }">
        <div :style="{ width: '12%', marginTop: (51 / 96) + 'rem', marginRight: '1.09%' }">
          <sidebar :sidebarIndex="sidebarIndex" :sidebarList="sidebarList" @sidebarClick="sidebarClick"></sidebar>
        </div>
        <div :style="{ width: '85.7%', height: '100%', background: '#FFFFFF', border: (1 / 96) + 'rem solid #FFFFFF', borderRadius: (15 / 96) + 'rem', marginTop: (14 / 96) + 'rem', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }">
          <keep-alive>
            <router-view />
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import  {pageResize} from '../../utils/resetScreenSize.js'
  import Header from '../../components/Header'
  import Sidebar from '../../components/Sidebar'
  export default {
    name: 'AccountSecurity',
    components: {
      VueHeader: Header,
      Sidebar: Sidebar
    },
    data () {
      return {
        userName: "ydsg",
        userImages: "../../static/Logo_image.png",
        sidebarIndex: "",
        sidebarList: [
          {
            id: 1,
            title: "个人资料",
            path: 'PersonalData'
          },
          {
            id: 2,
            title: "账号安全",
            path: 'AccountSecurityPage'
          }
        ]
      }
    },
    mounted() {
      pageResize();
      let path = this.$route.path.replace(new RegExp("/","gm"),"");
      if(path == 'UnbindPhone' || path == 'BindEmail' || path == 'ChangePassword') {
        path = 'AccountSecurityPage'
      }
      this.sidebarIndex = path;
      // 接口调用
    },
    watch: {
      '$route.path'(newValue, oldValue) {
        // console.log(newValue, oldValue);
        let path = newValue.replace(new RegExp("/","gm"),"");
        if(path == 'UnbindPhone' || path == 'BindEmail' || path == 'ChangePassword') {
          path = 'AccountSecurityPage'
        }
        this.sidebarIndex = path;
      }
    },
    methods: {
      accountSecurityClick() {
        // console.log("accountSecurityClick");
      },
      loginOutClick() {
        localStorage.removeItem('userInfo')
        let userInfo = localStorage.getItem('userInfo');
        if(!userInfo) {
          this.$router.replace({ name: 'Login' });
        }
      },
      sidebarClick(item) {
        this.sidebarIndex = item.path;
        this.$router.push({name: item.path, params: {}});
        window.document.title = item.title;
      }
    },
    activated () {
      let getUserInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.userName = getUserInfo.nickname;
      this.userImages = getUserInfo.face ? getUserInfo.face : "../../static/user_head_default.png";
    }
  }
</script>

<style scoped>
  .father .child{
    display: none;
  }
  .father:hover .child{
    display: block;
    z-index: 100;
  }
  .home-index {

  }
  .match-title-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }
  :-moz-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  ::-moz-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }
</style>
